<!DOCTYPE html>
<html>
<head>
    <!--hospital_purchase_catalog-->
	<meta charset="utf-8">
	<title>文章列表--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
<!--模糊查询-->
<div>
    <blockquote style="margin-right: 10%" class="layui-elem-quote quoteBox layui-col-lg-offset1">
        <form class="layui-form" id="searchTable" lay-filter="searchTable">
    	    <div class="layui-form-item layui-row">
    	        <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">药品流水号</label>
                	<div class="layui-input-block">
                		<input type="text" name="serialNumber" id="serialNumber" class="layui-input searchVal" />
                	</div>
                </div>
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">通用名</label>
                	<div class="layui-input-block">
                		<input type="text" name="commonName" id="commonName" class="layui-input searchVal" />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">剂型</label>
                	<div class="layui-input-block">
                	    <input name="dosageForm" class="layui-input searchVal" id="dosageForm" />
                	</div>
                </div>
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">规格</label>
                	<div class="layui-input-block">
                	    <input name="size" class="layui-input searchVal" id="size" >
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">单位</label>
                	<div class="layui-input-block">
                		<input type="text" name="unit" class="layui-input createTime">
                	</div>
                </div>
                <div class="layui-inline layui-col-md5">
                	<label class="layui-form-label">转换系数</label>
                	<div class="layui-input-block">
                    	<input type="text" class="layui-input" name="factor" id="factor">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">生产企业</label>
                	<div class="layui-input-block">
                		<input type="text" name="productionName" class="layui-input searchVal"/>
                	</div>
                </div>
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">商品名</label>
                	<div class="layui-input-block">
                		<input type="text" name="commodityName" class="layui-input searchVal"/>
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">价格范围</label>
                	<div class="layui-input-block">
                	    <input type="hidden" name="minPrice">
                	    <input type="hidden" name="maxPrice">
                		<div id="priceRange" class="demo-slider"></div>
                	</div>
                </div>
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">药品类别</label>
                	<div class="layui-input-block">
                		<select name="drugCategory" id="drugCategory" lay-filter="drugCategory">
                            <option>请选择药品类别：</option>
                        </select>
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">质量层次</label>
                	<div class="layui-input-block">
                		<select name="quality" id="quality" lay-filter="quality">
                            <option>请选择质量层次：</option>
                        </select>
                	</div>
                </div>
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">药品交易状态</label>
                	<div class="layui-input-block">
                		<select name="transaction" id="transaction" lay-filter="transaction">
                            <option>请选择交易状态：</option>
                        </select>
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-center">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">查询</button>
                   <button type="button" class="layui-btn" lay-submit="" lay-filter="output">导出</button>
                </div>
            </div>
    	</form>
    </blockquote>
</div>

<!--数据表格-->
<div>
    <table class="layui-hide" id="drugMessageTable" lay-filter="drugMessageTable"></table>
    <div id="toolBars" style="display: none">
        <button type="button" lay-event="add" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-add-1"></span>添加</button>
        <button type="button" lay-event="input" id="input" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-add-1"></span>导入</button>
    </div>
    <div id="rowBars" style="display: none">
        <button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-btn-warm"><span class="layui-icon layui-icon-search"></span>修改</button>
        <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-warm"><span class="layui-icon layui-icon-search"></span>删除</button>
    </div>
</div>
<div id="addOrUpdate" style="display:none;">
	<form  class="layui-form" id="addOrUpdateTable" lay-filter="addOrUpdateTable">
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">药品流水号</label>
            	<div class="layui-input-inline">
            		<input type="text" name="serialNumber" class="layui-input searchVal" readonly />
            	</div>
            </div>
            <div class="layui-inline ">
                <label class="layui-form-label">通用名拼音</label>
            	<div class="layui-input-inline">
            		<input type="text" name="commodityPinyin" class="layui-input searchVal" readonly/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">药品通用名</label>
            	<div class="layui-input-inline">
            	    <input name="commonName" class="layui-input searchVal" lay-verify="required" />
            	</div>
            </div>
            <div class="layui-inline ">
                <label class="layui-form-label">剂型</label>
            	<div class="layui-input-inline">
            		<input type="text" name="dosageForm" class="layui-input" lay-verify="required" >
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
            	<label class="layui-form-label">规格</label>
            	<div class="layui-input-inline">
                	<input type="text" class="layui-input" name="size" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline ">
                <label class="layui-form-label">单位</label>
            	<div class="layui-input-inline">
            		<input type="text" name="unit" class="layui-input searchVal" lay-verify="required"/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">转换系数</label>
            	<div class="layui-input-inline">
            		<input type="text" name="factor" class="layui-input searchVal" lay-verify="required"/>
            	</div>
            </div>
            <div class="layui-inline ">
                <label class="layui-form-label">生产企业</label>
            	<div class="layui-input-inline">
            		<input type="text" name="productionName" class="layui-input searchVal" lay-verify="required"/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">药品名</label>
            	<div class="layui-input-inline">
            	    <input type="hidden" name="id">
            		<input type="text" name="commodityName" class="layui-input searchVal" lay-verify="required" />
            	</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">中标价</label>
            	<div class="layui-input-inline">
            	    <input type="text" name="winPrice"  class="layui-input searchVal" lay-verify="required"/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">批准文号</label>
            	<div class="layui-input-inline">
            		<input type="text" name="approvalNumber" class="layui-input searchVal"/>
            	</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">批准文号有效期</label>
            	<div class="layui-input-inline">
            	    <input type="text" name="approvalDate" readonly id="layerApprovalDate" class="layui-input searchVal"/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">是否是进口药</label>
            	<div class="layui-input-inline">
            		<input type="radio" name="isImport" value="1" title="是">
                    <input type="radio" name="isImport" value="0" title="否" checked>
            	</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">包装材质</label>
            	<div class="layui-input-inline">
            	    <input type="text" name="packages"  class="layui-input searchVal"/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">包装单位</label>
            	<div class="layui-input-inline">
            		<input type="text" name="packageUnit"  class="layui-input searchVal"/>
            	</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">最新零售价</label>
            	<div class="layui-input-inline">
            	    <input type="text" name="newPrice"  class="layui-input searchVal"/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">零售价出处</label>
            	<div class="layui-input-inline">
            		<input type="text" name="priceSource"  class="layui-input searchVal"/>
            	</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">质量层次</label>
            	<div class="layui-input-inline">
            		<select name="quality" id="layerQuality" lay-filter="quality">
                        <option>请选择：</option>
                    </select>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">质量层次说明</label>
            	<div class="layui-input-inline">
            	    <input type="text" name="qualityDescription" class="layui-input searchVal"/>
            	</div>
            </div>
            <div class="layui-inline ">
                <label class="layui-form-label">有无质检报告</label>
            	<div class="layui-input-inline">
            		<input type="radio" name="haveReport" value="1" title="有">
                    <input type="radio" name="haveReport" value="0" title="无" checked>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">质检报告编号</label>
            	<div class="layui-input-inline">
            	    <input type="text" name="reportNum"  class="layui-input searchVal"/>
            	</div>
            </div>
            <div class="layui-inline ">
                <label class="layui-form-label">质检报告有效期</label>
            	<div class="layui-input-inline">
            		<input type="text" name="reportDate" readonly id="layerReportDate" class="layui-input searchVal"/>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品说明</label>
            	<div class="layui-input-inline">
            	    <input type="text" name="productionDescription" class="layui-input searchVal"/>
            	</div>
            </div>
            <div class="layui-inline ">
                <label class="layui-form-label">药品状态</label>
            	<div class="layui-input-inline">
            		<select name="transaction" id="layerTransaction" lay-filter="transaction">
                        <option>请选择：</option>
                    </select>
            	</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">药品类别</label>
            	<div class="layui-input-inline">
            		<select name="drugCategory" lay-verify="required" id="layerDrugCategory" lay-filter="drugCategory">
                        <option>请选择：</option>
                    </select>
            	</div>
            </div>
        </div>
        <div class="layui-form-item layui-center">
            <div class="layui-inline">
               <div class="layui-input-inline">
                  <button type="button" autocomplete="off" class="layui-btn layui-btn-green" lay-submit="" lay-filter="doSubmit" id="doSubmit">
                      <span class=" layui-icon layui-icon-add-1"></span>提交
                  </button>
               </div>
               <div class="layui-input-inline">
                   <button type="reset" autocomplete="off" class="layui-btn layui-bg-blue">
                       <span class=" layui-icon layui-icon-refresh"></span>重置
                   </button>
               </div>
            </div>
        </div>
    </form>
</div>
<div id="inputDiv" style="display: none">
    <div class="layui-center">
        <div style="margin-bottom: 30px"><span>下载导入的模板文件</span><a id="download" href="javascript:void(0);">点击下载药品信息导入模板</a></div>
        <div>
            <span style="color: red">
            提示：请下载后在模板文件中录入药品信息，在下边的“选择文件”中选择要导入的文件，点击“导入”
            </span><br>
            <span style="color: red">注意：请下载模板文件后切勿修改excel单元格格式，导入文件单元格格式必须为文本</span>
        </div>
        <button type="button" class="layui-btn" id="inputInput">导入</button>
        <button type="button" class="layui-btn" id="inputClose">关闭</button>
    </div>
</div>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script>
    layui.use(['form','upload','jquery','layer','laydate','element','table','slider'],function() {
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;
        var slider = layui.slider;
        var upload = layui.upload;
        laydate.render({
            elem:"#layerApprovalDate",
            type:"datetime"
        });
        laydate.render({
            elem:"#layerReportDate",
            type:"datetime"
        });layerReportDate
        //滑块渲染
        var sliderIns = slider.render({
            elem: '#priceRange'
            ,min:0
            ,max:1000
            ,value: [0, 1000] //初始值
            ,range: true //范围选择
            ,change: function(vals){
                $('input[name="minPrice"]').val(vals[0]);
                $('input[name="maxPrice"]').val(vals[1]);
            }
        });
        //数据表格渲染
        var tableIns = table.render({
            elem:"#drugMessageTable",
            url:"/loadAllDrugMessage",
            toolbar:"#toolBars",
            page:true,
            id:'drugMessageTableId',
            height:'470',
            cols:[
                [
                    {field:'id', title:'ID',  fixed: 'left', unresize: true,width:'80' ,sort: true,align:'center'}
                    ,{type:'checkbox',fixed:'center'}
                    ,{field:'serialNumber', title:'流水号',align:'center',width:'180'}
                    ,{field:'commonName', title:'通用名',align:'center',width:'180'}
                    ,{field:'dosageForm', title:'剂型',align:'center',width:'180'}
                    ,{field:'size', title:'规格',align:'center',width:'180'}
                    ,{field:'unit', title:'单位',align:'center',width:'180'}
                    ,{field:'factor', title:'转换系数',align:'center',width:'180'}
                    ,{field:'productionName', title:'生产企业',align:'center',width:'180'}
                    ,{field:'commodityName', title:'商品名',align:'center',width:'180'}
                    ,{field:'winPrice', title:'中标价',align:'center',width:'180'}
                    ,{field:'winPrice', title:'质量层次',align:'center',width:'180'}
                    ,{field:'drugCategory', title:'药品类别',align:'center',width:'180',templet:function(res) {
                        var result = "";
                        $.ajax({
                            url:'/getDrugCategoryById',
                            type:'get',
                            data:{drugCategoryId:res.drugCategory},
                            async:false,
                            success:function(d) {
                                result = d.category;
                            }
                        })
                        return result;
                    }}
                    ,{field:'transaction', title:'交易状态',align:'center',width:'180',templet:function(res) {
                        return res.transaction==1?"正常":
                        res.transaction==2?"取消交易":"";
                    }}
                    ,{fixed: 'right', title:'操作', toolbar: '#rowBars',width:260}
                ]
            ]
        });
        //表单提交，查询
        form.on('submit(search)',function(data) {
            tableIns.reload({
                where:data.field
            })
            return false;
        });
        //导出
        form.on('submit(output)',openOutput);
        //监听头部工具栏事件
        table.on('toolbar(drugMessageTable)',function(obj) {
            switch (obj.event) {
                case 'add':
                    openAdd();
                    break;
                case 'input':
                    openInput();
                    break;
            }
        });
        //行工具
        table.on('tool(drugMessageTable)',function(obj) {
            switch (obj.event) {
                case 'update':
                    openUpdate(obj.data);
                    break;
                case 'delete':
                    openDelete(obj.data);
                    break;
            }
        });
        function openUpdate(data){
            console.log(data)
            mainIns = layer.open({
                type:1,
                content:$("#addOrUpdate"),
                area:['700px','580px'],
                title:"添加用户",
                success:function(layero,index) {
                    //更改url
                    url = "/updateDrugMessage";
                    form.val("addOrUpdateTable",data);
                }
            })
        }
        //下载模板
        $("#download").click(download);
        function download(){
            window.location.href="/downloadDrugMessage";
        }

        //加载药品
        selectDrugCategory($("#drugCategory"),"/getDrugCategory");
        selectDrugCategory($("#layerDrugCategory"),"/getDrugCategory");
        //交易状态
        select($("#transaction"),"/getDataDictionary?dateType=1");
        select($("#layerTransaction"),"/getDataDictionary?dateType=1");
        //质量层次
        select($("#quality"),"/getDataDictionary?dateType=7");
        select($("#layerQuality"),"/getDataDictionary?dateType=7");
        //药品供应商信息展示
        var mainIns;
        var url;
        //提交表单
        form.on('submit(doSubmit)',function() {
            var params = $("#addOrUpdateTable").serialize();
            $.post(url,params,function(data) {
                //提示信息
                layer.msg(data.msg);
                //关闭弹出层
                layer.close(mainIns);
                //重新渲染table
                tableIns.reload();
            })
            return false;
        });
        function openShow(data) {
            console.log(data);
            mainIns = layer.open({
                type:1,
                content:$("#showData"),
                area:['800px','430px'],
                title:"查看详情",
                success:function(layero,index) {
                    form.val("showDataDrugForm",data.drugMessage);
                    form.val("showDataProviderForm",data.provider);
                }
            });
        }
        function openInput() {
            mainIns = layer.open({
                type:1,
                content:$("#inputDiv"),
                area:['700px','280px'],
                title:"药品信息导入",
                success:function(layero,index) {
                    //更改url
                    url = "/addDrugMessage";
                    tableIns.reload();
                }
            })
        }
        $("#inputClose").click(inputClose);
        function inputClose() {
            layer.close(mainIns);
        }
        function openOutput() {
            var checkStatus = table.checkStatus('drugMessageTableId'); //idTest 即为基础参数 id 对应的值
            if(checkStatus.data.length==0){
                layer.msg("请选择导出的数据");
                return false;
            }
            table.exportFile(tableIns.config.id, checkStatus.data,'xls');
            layer.msg("导出成功，共"+checkStatus.data.length+"条数据");
            return false;
        }
        function openDelete(data) {
            mainIns = layer.confirm('您真的要删除吗？', {
                btn: ['删除','取消'] //按钮
            }, function(){
                $.post("/deleteDrugMessage",{id:data.id},function(res) {
                    layer.msg(res.msg);
                    tableIns.reload();
                })
            })
        }
        //添加采购药品，添加到purchase_drup_detail
        function openAdd() {
            mainIns = layer.open({
                type:1,
                content:$("#addOrUpdate"),
                area:['700px','580px'],
                title:"添加用户",
                success:function(layero,index) {
                    //更改url
                    url = "/addDrugMessage";
                    $("#addOrUpdateTable")[0].reset();
                }
            })
        }
        //加载下拉框
        function select(item,url,dataNum) {
            $.get(url,function(data) {
                var html = "<option value='0'>请选择</option>";
                $.each(data.data,function(index,item) {
                    if(item.dataNum===dataNum){
                        html += "<option selected value='"+item.dataNum+"'>"+item.dataName+"</option>"
                    }else {
                        html += "<option value='"+item.dataNum+"'>"+item.dataName+"</option>"
                    }
                })
                item.empty();
                item.append(html);
                // $("#purchaseState").html(html);
                form.render();
            })
        }
        function selectDrugCategory(item,url) {
            $.get(url,function(data) {
                var html = "<option value='0'>请选择药品类别</option>";
                $.each(data,function(index,item) {
                    html += "<option value='"+item.id+"'>"+item.category+"</option>"
                })
                item.empty();
                item.append(html);
                // $("#purchaseState").html(html);
                form.render();
            })
        }
        //文件上传
        var uploadIns = upload.render({
            elem: '#inputInput'
            ,url: '/inputDrugMessage' //改成您自己的上传接口
            ,accept:'file'
            ,exts:'xls|xlsx'
            ,field:'file'
            ,method:'post'
            ,done: function(res){
                //如果上传失败
                if(res.code < 0){
                    return layer.msg(res.msg);
                }
                return layer.msg(res.msg);
            }
        });
    })
</script>
</body>